<template>
    <div id="forget">
        <div class="forget-title">忘记密码</div>
        <div class="form-item">
            <input type="text" placeholder="请输入账号" />
        </div>

        <div class="form-item">
            <input type="text" placeholder="请输入验证码" />
            <text class="code">获取验证码</text>
        </div>
        <div class="form-item">
            <input type="text" placeholder="请输入新密码" />
        </div>
        <div class="form-item">
            <input type="text" placeholder="请再次输入新密码" />
        </div>
        <button class="btn">确认</button>
    </div>
</template>

<script>
</script>

<style lang="less" scoped>
#forget {
    width: 80%;
    margin: 0 auto;
    .forget-title {
        font-size: 40px;
        margin: 40px 20px;
        font-weight: bold;
    }

    .form-item {
        align-items: center;
        margin: 40px 0;

        input {
            width: 100%;
            height: 90px;
            border: none;
            border-bottom: 2px solid #ccc;
            margin: 0 auto;
            outline: none;
            font-size: 28px;
        }
    }

    .btn {
        width: 100%;
        height: 90px;
        background-color: rgb(63, 161, 157);
        color: #fff;
        border: none;
        border-radius: 20px;
    }

    .code {
        font-size: 28px;
        color: rgb(63, 161, 157);
        margin-left: 20px;
        position: fixed;
        top: 550px;
        right: 100px;
        z-index: 999;
    }
}
</style>